<template>
    <div class="liveAdd">
        <!-- 点播 -->
        <h2 class="tit">健康讲堂点播详情</h2>
        <div class = 'main'>
            <p class="title">基本信息</p>
            <Row class="box" :gutter="32">
                <Col span="16">
                    <!-- 标题 -->
                    <div class="live">
                        <span class="i">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：</span>
                        <b class="weight">{{ live.title }}</b>
                    </div>
                </Col>
                <Col span="8">
                    <!-- 课堂类型 -->
                    <div class="live">
                        <span class="i">课堂类型：</span>
                        <b class = 'weight'>{{ live.modalDataVal }}</b>
                    </div>
                </Col>
                <Col span="8">
                    <!-- 播放来源 -->
                    <div class="live">
                        <span class="i">播放来源：</span>
                        <b class="weight">{{ live.videoSourceTest }}</b>
                    </div>
                    <!-- 文件路径 -->
                    <div class="live" v-if="live.videoSource==1" style="width:100%">
                        <span class="i">网站地址：</span>
                        <p class="weight" style="word-break:break-all;word-wrap:break-word">{{ live.playbackAddress }}</p>
                    </div>
                    <!-- 上传的视频 -->
                    <div class="live" v-else>
                        <span class="i">点播视频：</span>                
                        <video-play :src="live.filePath" :poster="poster" :videoStyle="videoStyle"></video-play>
                    </div>  
                    <!-- 推广力度 -->
                    <div class="live">
                        <span class="i">推广力度：</span>
                        <b class="weight">{{ live.fictitiousNum }}</b>
                    </div>
                    
                </Col>
                <Col span="8" >
                    <!-- 原始价格 -->
                    <div class="live" >
                        <span class="i">原始价格：</span>
                        <b class="weight">{{ live.originPrice }}</b>
                    </div>
                    <!-- 列表首图 -->
                    <div class="live">
                        <span class="i">封面图：</span>
                        <img :src="this.fileBaseUrl + pictureFormat(images)" alt class="imgUrlS">
                    </div>
                </Col>
                <Col span="8">
                <!-- 折后价格 -->
                    <div class="live">
                        <span class="i">折后价格：</span>
                        <b class="weight">{{ live.discountPrice }}</b>
                    </div>
                    <div class="live">
                        <span class="i">列表图：</span>
                        <img :src="this.fileBaseUrl + pictureFormat(listimages)" alt :class="{'imgUrl':live.pageStyle=='1','imgUrlS':live.pageStyle=='2'}">
                    </div>
                </Col>               
            </Row>
        </div>
        <div class = 'main'>
            <p class="title">主讲人信息</p>
            <Row class="box" :gutter="32">
                <Col span="8">
                    <!-- 主讲人 -->
                    <div class="live">
                        <span class="i">
                            <b style="color:#ff9966;"></b>主讲人：
                        </span>
                        <b class="weight">{{ live.doctorName }}</b>
                    </div>
                    <!-- 所属机构 -->
                    <div class="live">
                        <span class="i">所属机构：</span>
                        <b class="weight">{{ live.doctorHospital  }}</b>
                    </div>
                </Col>
                <Col span="8">
                    <!-- 职业职称 -->
                    <div class="live">
                        <span class="i">职业职称：</span>
                        <b class="weight">{{ live.doctorTitle  }}</b>
                    </div>
                    <!-- 所属科室 -->
                    <div class="live">
                        <span class="i">所属科室：</span>
                        <b class="weight">{{ live.deptType  }}</b>
                    </div>
                </Col>
                <Col span="23">
                    <!-- 个人简介 -->
                    <div class="live">
                        <span class="i">个人简介：</span>
                        <b class="weight">{{ live.introduction  }}</b>
                    </div>
                </Col>
            </Row>
        </div>
        <div class = 'main'>
            <p class="title">课堂介绍</p>
            <!-- 课堂介绍 -->
            <div class="live">
                <div class="shuru">
                    <vueEditor
                        id="editor_id"
                        :textHtml="live.introduce"
                        :urlCode="urlCode"
                        @valueHandle="afterChange"
                        :height='300'
                        style="width: 100%;"
                    ></vueEditor>
                </div>
            </div>
        </div>
        <div class = 'main'>
            <p class="title">点播状态</p>
            <!-- 原因 -->
            <div class="box">
                <p class="text" v-if="playStatus == 1">待审核</p>
                <p class="text" v-if="playStatus == 2">审核通过</p>
                <p class="text" v-if="playStatus == 3"><span>审核未通过原因：</span>{{ reason }}</p>
                <p class="text" v-if="playStatus == 4"><span>下架原因：</span>{{ reason }}</p>
                <p class="text" v-if="playStatus == 6">已完成</p>
                <p class="text" v-if="playStatus == 6">已撤回</p>
                <p class="text" v-if="playStatus == 6">已关闭</p>
            </div>
        </div>
        <!-- 保存 -->
        <!--1待审核
            2审核通过
            3审核未通过
            4下架 -->
        <div style="margin-top:20px;text-align:center">
            <Button type="primary" @click="saveLive" v-if="playStatus == 1" style="width:95px;height:35px;">
                <Icon type="ios-checkmark" style="margin-right: 5px" />审核通过
            </Button>
            <Button @click="fail" v-if="playStatus == 1" style="width:115px;height:35px;">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 审核不通过
            </Button>
            <Button @click="Shelves" type="primary" v-if="playStatus == 2" style="width:75px;height:35px;">
                <i class = "iconfont icon-shanchu" style="font-size:14px;margin-right:5px"></i>下架
            </Button>
            <Button @click="back" style="width:75px;height:35px;">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
            </Button>
        </div>
        <Modal
            v-model="modal1"
            :title="titmodel"
            :mask-closable="false"
            :footer="null">
            <div class="live">
                <span class="i">原因</span>
                <Input v-model="reason" type="textarea" :rows="4" :placeholder="'请输入'+titmodel" maxlength='200' />
            </div>
            <div slot="footer">
                <div :disabled='disabled' style="textAlign: center">
                    <Button type="primary" @click="backLive" style="width:75px;height:35px;">
                        <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                    </Button>
                    <Button @click="modal1 = false" style="width:75px;height:35px;">
                        <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 取消
                    </Button>                  
                </div>
            </div>
        </Modal>        
    </div>
</template>
<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import vueEditor from "@/components/vueEditor";
import videoPlay from "@/components/videoPlayer";
export default {
    components:{
        vueEditor,
        videoPlay
    },
    data() {
        return {
            // 新增直播/点播
            status: "",
            // 检索医生权限管理
            doctorList: [],
            // 上传图片相关
            defaultList: [],
            images: "",
            urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
            // 点播
            live: {
                // 课堂介绍
                introduce:"",
                // 输入值
                search: "",
                // 主讲人名字
                doctorName: "",
                // 主讲人ID
                doctorId: "",
                //职业职称
                doctorTitle: "",
                //所属机构
                doctorHospital: "",
                //所属科室
                deptType: "",
                //个人简介
                introduction: "",
                // 点播标题
                title: "",
                // 原始价格
                originPrice: null,
                // 折后价格
                discountPrice: null,
                // 推广力度
                fictitiousNum: null,
                // 播放地址
                playbackAddress: "",
                // 文件路径
                filePath: "",
                // 播放来源
                videoSource: 1,
                videoSourceTest:"",
                // 课堂类型
                modalDataVal: "",
                pageStyle: "",
            },
            liveType: [],
            videoList: [
                {
                    id: 1,
                    name: "网站地址"
                },
                {
                    id: 2,
                    name: "本地上传"
                }
            ],
            id: "",
            reason: "",
            playStatus: "",
            poster: "",
            videoStyle: { width: "400px", height: "300px" },
            modal1: false,
            titmodel: '审核不通过原因',
            passStatus: '',
            listimages: '',
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/healthAudit/list",
                title: "健康讲堂审核"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let query = this.$route.query;
        this.id = query.id;
        this.playStatus = query.playStatus;
        this.$axios
            .post(api.findLectureById, {
                id: this.id
            })
            .then(res => {
                if (res.data.success) {
                    let ret = res.data.object;
                    // 医生信息
                    this.live.doctorName = ret.doctorName;
                    this.live.doctorId = ret.doctorId;
                    this.live.doctorHospital = ret.doctorHospital;
                    this.live.doctorTitle = ret.doctorTitle;
                    this.live.deptType = ret.doctorDept;
                    this.live.introduction = ret.doctorIntroduce;
                    // 价格
                    this.live.originPrice = ret.originalPrice;
                    this.live.discountPrice = ret.discountPrice;
                    // 路径
                    this.live.playbackAddress = ret.playbackAddress;
                    // 播放地址
                    if(Boolean(ret.filePath)){
                        this.videoStatus = true;
                        this.live.filePath = this.fileBaseUrl + ret.filePath
                    }
                    // 标题
                    this.live.title = ret.title;
                    // 拒绝原因
                    this.reason = ret.reason;
                    // 课堂介绍
                    this.live.introduce = ret.classIntroduction
                    // 来源
                    this.videoList.forEach(item => {
                        if(ret.videoSource == item.id) {
                            this.live.videoSource = item.id
                            this.live.videoSourceTest=item.name
                        }
                    })
                    // 推广力度
                    this.live.fictitiousNum = ret.fictitiousNum;
                    // 课堂类型
                    this.live.modalDataVal = ret.type;
                    this.live.modalDataVal = ret.columnName
                    this.live.pageStyle = ret.pageStyle
                    // 图片
                    if (ret.headImg) {
                        this.images = ret.headImg;
                    }
                    if (ret.listImg) {
                        this.listimages = ret.listImg;
                    }
                } else {
                    this.$Message.error("查询点播详情失败");
                }
            });
    },
    methods: {
        afterChange(val) {
            this.live.introduce = val;
        },
        // 审核通过
        saveLive() {
            this.$axios
                .post(api.updateLecturePlayStatus, {
                    playStatus: 2,
                    id: this.id,
                    reason: this.reason,
                    ilive: 0,
                })
                .then(res => {
                    if (res.data.success) {
                        let ret = res.data.object;
                        this.$Message.info("审核成功");
                        setTimeout(() => {
                            let query = this.$route.query;
                            this.functionJS.queryNavgationTo(
                                this,
                                "/index/publicOperation/healthAudit/list",
                                query
                            );
                        }, 800);
                    } else {
                    }
                });
        },
        //审核不通过
        fail() {
            this.modal1 = true
            this.titmodel = '审核不通过原因'
            this.passStatus = 3
        },
        //下架
        Shelves() {
            this.modal1 = true
            this.titmodel = '下架原因'
            this.passStatus = 4
        },
        // 拒绝弹窗
        backLive(index) {
            if (!Boolean(this.reason)) {
                this.$Message.error("请输入"+this.titmodel);
                return "";
            }
            this.$axios
                .post(api.updateLecturePlayStatus, {
                    playStatus: this.passStatus,
                    id: this.id,
                    reason: this.reason
                })
                .then(res => {
                    if (res.data.success) {
                        let ret = res.data.object;
                        this.$Message.info("操作成功");
                        console.log(ret);
                        setTimeout(() => {
                            let query = this.$route.query;
                            this.functionJS.queryNavgationTo(
                                this,
                                "/index/publicOperation/healthAudit/list",
                                query
                            );
                        }, 800);
                    } else {
                    }
                });
        },
        // 返回上一步
        back () {
            let query = this.$route.query;
            this.functionJS.queryNavgationTo(
                this,
                "/index/publicOperation/healthAudit/list",
                query
            );
        }
    }
};
</script>
<style lang="less" scoped>
.live {
        width: 100%;
        display: flex;
        margin: 10px 0;
        span {
            display: inline-block;
            min-width: 30px;
            // margin-right: 30px;
        }
    }
.shuru {
    width: 100%;
    margin: 5px 30px;
    div {
        margin: 0;
    }
}
.word{
    word-break: break-all;
    overflow: hidden;  /** 隐藏超出的内容 **/
    // white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;   /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    display: inline-block;
    width: 440px;
    min-height: 50px;
}
.layui-layer {
    word-break: break-all;
    word-wrap: break-word;
}

.liveAdd {
    width: calc(100%);
    padding: 10px 0px;
    margin: 0 auto;
    background: #fff;
    .live {
        width: 100%;
        display: flex;
        margin: 10px 0;
        span {
            display: inline-block;
            min-width: 80px;
        }
        .imgUrl {
            width: 130px;
            height: 130px;
        }
        .imgUrlS {
            width: 150px;
            height: 80px;
        }
        .weight {
            font-size: 14px;
        }
    }
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 97%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .box{
            padding: 0 30px;
        }
        .hongdian {
            margin-left: -10px;
        }
        .text {
            color: #ff9966;
        }
    }
}
.page{
    text-align: center;
    margin: 20px 0;
}
</style>
